<?php
$musicDir = 'music/';
$files = array_diff(scandir($musicDir), array('.', '..'));
$mp3Files = array_filter($files, function($file) {
    return pathinfo($file, PATHINFO_EXTENSION) === 'mp3';
});

// 处理排序
$order = isset($_COOKIE['playlist_order']) ? $_COOKIE['playlist_order'] : 'normal';
if ($order === 'reverse') {
    usort($mp3Files, function($a, $b) {
        return strcmp(pathinfo($b, PATHINFO_FILENAME), pathinfo($a, PATHINFO_FILENAME));
    });
} else {
    usort($mp3Files, function($a, $b) {
        return strcmp(pathinfo($a, PATHINFO_FILENAME), pathinfo($b, PATHINFO_FILENAME));
    });
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TFBOYS ❤ 橙海十年</title>
    <link rel="stylesheet" href="styles.css">
    <style>
body {
    font-family: Arial, sans-serif;/*网页整体字体样式*/
    display: flex;/*弹性盒子布局，弹性容器,并在其中使用灵活的盒子模型来进行元素的排列和定位，设为flex布局后，子元素的float、clear和vertical-align属性将失效。*/
    flex-direction: column;/*当元素使用flex后，该元素则成为flex容器(container)，容器属性有以下四个：
                            row(默认值)，从左至右依次排列。
                            row-reverse，从右到左依次排列。
                            column;从上到下依次排列。
                            column-reverse;从下到上依次排列
                            
                            nowrap（默认值） | wrap | wrap-reverse;
                            flex-wrap: nowrap;不换行。
                            flex-wrap：wrap ；换行。
                            flex-wrap: wrap-reverse;换行，但第一排在下面。*/
    align-items: center;/*垂直居中*/
    margin: 0;/*边缘0*/
    padding: 0;/*边框内部0*/
    background: url('bj.jpeg') no-repeat center center fixed;/*网页背景，全屏居中填充，不滚动*/
    background-size: cover;/*cover：图像将被调整大小以适应容器。如果长宽比不一样，那么图像将被屏蔽以适应。
                            contain：在这种情况下，图像将被调整大小以适应容器。如果长宽比不对，那么图像就会被黑边化。
                            auto：使用auto，图像将保持其默认大小。*/
}

h1 {
    text-align: center;   /* 文字居中对齐 */
    color: #ffffff;         /* 文字颜色为白色 */
    text-shadow: 2px 2px 4px gray;         /* 阴影：水平偏移2px，垂直偏移2px，模糊半径4px，颜色为灰色 */
    margin: 20px 0;       /* 上下边缘20px，左右边缘0px */
}

audio {
    width: 100%;/*音频播放标签宽度最宽*/
}

.playing {
    font-weight: bold;/* 加粗突出显示正在播放的歌曲 */
}

#playlist li {
    background-color: #ffffff; /* 默认背景颜色 白色 */
    margin: 5px 0;/* 上下边缘5px，左右边缘0px */
    padding: 5px;/*衬垫大小，即歌曲标签页外侧的边框粗细*/
    border-radius: 4px;/*衬垫的边框的圆角矩形*/
    list-style: none;/*列表项目样式为不使用项目符号   但是貌似在加了衬垫的情况下样式没有什么变化
                        disc : 默认值，实心圆。    （默认状态）
                        circle : 空心圆。                  （点变成空心的）
                        square : 实心方块。             （变实心方块）
                        decimal : 阿拉伯数字。          （变成有序列表）
                        lower-alpha : 小写英文字母。   （变成小写英文）
                        upper-alpha : 大写英文字母。    （变成大写英文）
                        none : 不使用项目符号。  （前面的点取消不见）*/
}


.player-container {
    width: 90%;/*播放器整体的宽度，包含播放器、控件、歌曲列表区域*/
    max-width: 600px;/*播放器整体的宽度，最大宽度为600px*/
    overflow-y: auto;/*如果页面有滚动条，自动高度*/
}



.controls {
    margin: 10px 0;/*控件区域的外边框距离上下10px，左右0*/
}


.myLabel {
  color: #ffffff; /* label标签字体设置为所需的颜色 */
}

button {
    margin: 0 5px;/*按钮之间的边缘距离*/
    padding: 5px 10px;/*按钮的长宽高*/
    border: none;/*按钮边框样式 无*/
    border-radius: 4px;/*按钮的圆角矩形弧度*/
    background-color: #ff6347;/*播放控件按钮的颜色*/
    color: #ffffff;/*按钮字体颜色*/
    cursor: pointer;/*移动到按钮上鼠标变成手型*/
}

button:hover {
    background-color: #0056b3;/*播放控件按钮被鼠标划过的颜色*/
}

ul {
    list-style: none;/*列表项目样式为不使用项目符号*/
    padding: 0;/*歌曲列表边框内部等于0 主要用途就是帮助你重置不同的浏览器默认样式，以达到不同浏览器显示网页的结果不会差太远的效果，无封紧贴着的意思*/
    margin: 0;/*歌曲列表边框外部等于0 主要用途就是帮助你重置不同的浏览器默认样式，以达到不同浏览器显示网页的结果不会差太远的效果，无封紧贴着的意思*/
}

li {
    margin: 10px 0;/*列表区域的外边框距离上下10px，左右0*/
}


a {
    text-decoration: none;/*歌曲列表文字标签文本装饰效果
                            underline: 为文本添加下划线，常用于强调或者链接。
                            overline: 在文本上方添加一条线，主要用于特殊用途，如表格标题。
                            line-through: 通过文本划线，常用于标记已删除或不完整的部分。
                            none： 无文本修饰*/
    color: #000000;/*歌曲列表文字标签 颜色*/
    display: block;/*占据整个水平宽度，从左到右延伸，在其他块级元素上方或下方开始新的一行，具有自定义高度和宽度（除非另有指定）*/
    padding: 10px;/*内边框*/
    background: #ffffff;/*歌曲标签的背景色*/
    border: 1px solid #e2e2e2;/*歌曲标签的边框线粗细，灰色*/
    border-radius: 4px;/*歌曲标签的边框的圆角矩形*/
    cursor: pointer;/*移动到按钮上鼠标变成手型*/
}

a:hover {
    background: #ffaea0;/*鼠标移动到歌曲列表上时，歌曲标签显示的颜色*/
}



    </style>
    
    <!--51啦统计代码-->
    <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
    <script>LA.init({id:"3MYGaOsuBwU9VcC9",ck:"3MYGaOsuBwU9VcC9"})</script>
    
</head>
<body>
    <h1 style="color: #ff6347;">TFBOYS ❤ 橙海十年</h1>
    <div class="player-container">
        <audio id="audioPlayer" controls>
            <source src="" type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>
        <div class="controls">
            <label for="speed" class="myLabel">倍速</label>
            <select id="speed">
                <option value="0.5">0.5x</option>
                <option value="1" selected>1x</option>
                <option value="1.5">1.5x</option>
                <option value="2">2x</option>
            </select>
            <button id="repeatMode">单曲循环</button>
            <button id="shuffleMode">随机播放</button>
            <button id="sortOrder">正序排列</button>
            <button id="reverseOrder">倒序排列</button>
            <label for="backgroundColor"  class="myLabel">边框颜色:</label>
            <input type="color" id="backgroundColor" value="#ffffff">
        </div>
        <ul id="playlist">
            <?php foreach ($mp3Files as $file): ?>
                <li><a href="#" data-src="<?php echo $musicDir . $file; ?>"><?php echo pathinfo($file, PATHINFO_FILENAME); ?></a></li>
            <?php endforeach; ?>
        </ul>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const audioPlayer = document.getElementById('audioPlayer');
            const playlist = document.getElementById('playlist');
            const speedControl = document.getElementById('speed');
            const repeatModeButton = document.getElementById('repeatMode');
            const shuffleModeButton = document.getElementById('shuffleMode');
            const sortOrderButton = document.getElementById('sortOrder');
            const reverseOrderButton = document.getElementById('reverseOrder');
            const backgroundColorInput = document.getElementById('backgroundColor');

            let repeatMode = 'none'; // 'none', 'single'
            let playlistMode = 'normal'; // 'normal', 'shuffle'
            let currentTrackIndex = 0;

            function loadTrack(index) {
                const links = playlist.querySelectorAll('a');
                audioPlayer.src = links[index].getAttribute('data-src');
                audioPlayer.play();
                currentTrackIndex = index;

                // 更新 UI 突出显示当前播放的歌曲
                playlist.querySelectorAll('li').forEach((li, i) => {
                    li.classList.toggle('playing', i === currentTrackIndex);
                });
            }

            function handleTrackEnd() {
                if (repeatMode === 'single') {
                    audioPlayer.play();
                } else if (playlistMode === 'normal') {
                    if (currentTrackIndex < playlist.querySelectorAll('a').length - 1) {
                        loadTrack(currentTrackIndex + 1);
                    }
                } else if (playlistMode === 'shuffle') {
                    const randomIndex = Math.floor(Math.random() * playlist.querySelectorAll('a').length);
                    loadTrack(randomIndex);
                }
            }

            playlist.addEventListener('click', (event) => {
                event.preventDefault();
                if (event.target.tagName === 'A') {
                    const links = playlist.querySelectorAll('a');
                    const index = Array.from(links).indexOf(event.target);
                    loadTrack(index);
                }
            });

            audioPlayer.addEventListener('ended', handleTrackEnd);

            speedControl.addEventListener('change', () => {
                audioPlayer.playbackRate = parseFloat(speedControl.value);
            });

            repeatModeButton.addEventListener('click', () => {
                repeatMode = repeatMode === 'none' ? 'single' : 'none';
                repeatModeButton.textContent = repeatMode === 'none' ? '单曲循环' : '关闭单曲循环';
            });

            shuffleModeButton.addEventListener('click', () => {
                playlistMode = playlistMode === 'shuffle' ? 'normal' : 'shuffle';
                shuffleModeButton.textContent = playlistMode === 'shuffle' ? '关闭随机播放' : '随机播放';
            });

            sortOrderButton.addEventListener('click', () => {
                document.cookie = 'playlist_order=normal; path=/';
                location.reload();
            });

            reverseOrderButton.addEventListener('click', () => {
                document.cookie = 'playlist_order=reverse; path=/';
                location.reload();
            });

            backgroundColorInput.addEventListener('input', () => {
                document.querySelectorAll('#playlist li').forEach(li => {
                    li.style.backgroundColor = backgroundColorInput.value;
                });
            });

            // 初始化时加载第一首曲目
            loadTrack(0);
        });
    </script>
    
    
</br>
<p style="color: #ff6347;">AiiyiYeiのTF橙海十年</p>


    
</body>
</html>
